<style>
.coming {
  display: flex;
  white-space: nowrap;
  width: 100%;
  overflow: scroll;
  white-space: nowrap;
  height: 220px;
}
.acc {
  width: 100px;
  height: 147px;
  margin: 7px 5px;
}

.contents {
  display: flex;
  white-space: nowrap;
  padding-left: 10px;
  position: relative;
}
.count {
  margin-top: 22px;
  text-align: left;
  padding-left: 10px;
}
.nm {
  text-align: left;
}
#fire {
  padding-left: 10px;
  line-height: 35px;
}
.fier{
  width:110px;
  height:204px;
}
#zhuyan {
  width: 188px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
button {
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
  background-color: #faaf00;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  top: 40%;
  right: 5%;
}
#btn {
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
  background-color: skyblue;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  top: 40%;
  right: 5%;
}
.title{
  text-align: left;
  font-size: 14px;
  color: #333;
  padding-left: 5px;
}
.movie_ID{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* 设置上半场过度的初始状态，下半场动画的结束状态 */
.v-enter,
.v-leave-to{
   opacity: 0;
   transform: translateX(50px);
}
/* 设置上半场动画的结束状态，下半场过渡的初始状态 */
.v-enter-to,
.v-leave{
  opacity: 0.4;
  transform: translateX(0)
}
</style>




<template>
  <div class="home">
    <!-- 请求中 -->
    <div class="loading" v-if="!list.length">
      <mt-spinner type="fading-circle" color="#26a2ff"></mt-spinner>
    </div>
     <h5 class="title">最近受期待:</h5>
    <!-- 请求结束才显示 -->
    <transition>
    <div class="coming" v-if="list.length" v-infinite-scroll="load" infinite-scroll-distance="50">
      <!-- 遍历数据 -->
      <ul v-for="(item,index) in list" :key="index">
        <div class="fier">
          <img :src="[item.img.replace('w.h','100.150')]" class="acc">
          <!-- 电影ID -->
          <h5 class="movie_ID">{{item.nm}}</h5>
          <!-- 电影日期 -->
          <p>{{item.comingTitle}}</p>
        </div>
      </ul>
    </div>
    </transition>
      <!-- 电影列表 -->
    <ul v-if="list.length" v-infinite-scroll="load" infinite-scroll-distance="50">
      <li v-for="(item,index) in list" :key="index">
        <!-- 电影日期 -->
        <p class="count">{{item.comingTitle}}</p>
        <div class="contents">
          <img :src="[item.img.replace('w.h','100.150')]" class="movie">
          <div id="fire">
            <p class="nm">{{item.nm}}</p>
            <p v-if="item.sc == 0" style="color:#FAAF00;text-align: left;">{{item.wish}}人想看</p>
            <p id="zhuyan">主演:{{item.star}}</p>
            <p style="text-align: left;">{{item.showInfo}}</p>
          </div>
           <!-- 购票预售组件 -->
          <button v-if="item.rt <= time">
            <span class="yushou">想看</span>
          </button>
          <button id="btn" v-if="item.rt >= time">
            <span class="yushou">预售</span>
          </button>
        </div>
      </li>
    </ul>
     <mt-spinner type="fading-circle" color="#26a2ff"></mt-spinner>
  </div>
</template>


<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";
import { constants } from "crypto";
import api from "../utils/api.js";
export default {
  name: "home",
  data() {
    return {
      list: "",
      more : '',
      movieIds: [],
      time : '',
    };
  },
  methods: {
     load () {
       let moreComingList = "/moreComingList";
       let len = this.list.length;
       let temp = this.movieIds.slice(len , len + 10).join(",");
       this.axios.get(moreComingList,{
         params: {
           token: "",
           movieIds: temp
         }
       }).then(res=>{
        //  this.more = res.data.movieIds;
        //  console.log(this.more);
           res.data.coming.forEach(item => {
            this.list.push(item);  
          });
       }).catch(err=>{});
      }
  },
  created() {
    let moreComingList_blueJ = "/comingList";
    let { url, methods, params } = api.comingList;
    params.movieIds = this.$route.params.movieIds;
    this.axios
      .get(moreComingList_blueJ, {
        params: {
          token: ""
        }
      })
      .then(res => {
        this.list = res.data.coming;
        this.movieIds = res.data.movieIds;
      })
      .catch(err => {
        console.warn(err);
      });


    let data = new Date();
    let Y = data.getFullYear();
    let M = data.getMonth()+1;
    let D = data.getDate();
    if(M<10){
      M = '0'+M
    }
    if(D<10){
      D = '0' +D
    }

    this.time = Y+ '-' + M +'-' + D;
  }
};
</script>

